import React, { Component } from 'react'
import MyTabs from './components/MyTabs'

export default class App extends Component {
  data=[
    {
      id:1,
      title:'Tab1'
    },
    {
      id:2,
      title:'Tab2'
    },
    {
      id:3,
      title:'Tab3'
    },
    {
      id:4,
      title:'Tab4'
    },
    {
      id:5,
      title:'Tab5'
    }
  ]
  render() {
    return (
      <div>
          <MyTabs 
            data={this.data} 
            layout={"row"}
            callback={arg=>{
            return <button style={{
              border:'1px solid #ccc',
              padding:'5px'
            }}>{arg}</button>
          }}></MyTabs>


        <MyTabs 
            data={this.data} 
            layout={"row"}
            callback={arg=>{
            return <a href='#'>{arg}</a>
          }}></MyTabs>

        <MyTabs 
            data={this.data} 
            layout={"row"}
            callback={arg=>{
            return <div style={{
              borderBottom:'5px solid blue',
              
            }}>{arg}</div>
          }}></MyTabs>
      </div>
    )
  }
}
